<docs>
---
order: 9
title: 树形数据展示
---

## zh-CN

表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置。
可以通过设置 `indentSize` 以控制每一层的缩进宽度。

</docs>

<template>
    <j-space align="center" style="margin-bottom: 16px">
        CheckStrictly:
        <j-switch v-model:checked="rowSelection.checkStrictly"></j-switch>
    </j-space>
    <j-table
        :columns="columns"
        :data-source="data"
        :row-selection="rowSelection"
    />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: '12%',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        width: '30%',
        key: 'address',
    },
];

interface DataItem {
    key: number;
    name: string;
    age: number;
    address: string;
    children?: DataItem[];
}

const data: DataItem[] = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
            {
                key: 11,
                name: 'John Brown',
                age: 42,
                address: 'New York No. 2 Lake Park',
            },
            {
                key: 12,
                name: 'John Brown jr.',
                age: 30,
                address: 'New York No. 3 Lake Park',
                children: [
                    {
                        key: 121,
                        name: 'Jimmy Brown',
                        age: 16,
                        address: 'New York No. 3 Lake Park',
                    },
                ],
            },
            {
                key: 13,
                name: 'Jim Green sr.',
                age: 72,
                address: 'London No. 1 Lake Park',
                children: [
                    {
                        key: 131,
                        name: 'Jim Green',
                        age: 42,
                        address: 'London No. 2 Lake Park',
                        children: [
                            {
                                key: 1311,
                                name: 'Jim Green jr.',
                                age: 25,
                                address: 'London No. 3 Lake Park',
                            },
                            {
                                key: 1312,
                                name: 'Jimmy Green sr.',
                                age: 18,
                                address: 'London No. 4 Lake Park',
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
];

const rowSelection = ref({
    checkStrictly: false,
    onChange: (
        selectedRowKeys: (string | number)[],
        selectedRows: DataItem[],
    ) => {
        console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            'selectedRows: ',
            selectedRows,
        );
    },
    onSelect: (
        record: DataItem,
        selected: boolean,
        selectedRows: DataItem[],
    ) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (
        selected: boolean,
        selectedRows: DataItem[],
        changeRows: DataItem[],
    ) => {
        console.log(selected, selectedRows, changeRows);
    },
});

export default defineComponent({
    setup() {
        return {
            data,
            columns,
            rowSelection,
        };
    },
});
</script>
